<template>
  <div class="home">
    <div class="back-button-container">
      <button class="back-button" @click="goBack">返回</button>
    </div>
    <div class="auth-container">
      <h1 class="auth-title">实名认证</h1>
      <p class="auth-desc">请{{ maskedName }}本人刷脸验证</p>
      <p class="auth-tip">请在光线良好的环境下操作，脸部完整无遮挡</p>
      <div class="face-container">
        <img :src="faceimg" alt="人脸框" class="face-img">
      </div>
      <button 
        class="auth-button" 
        @click="handleFaceAuth" 
        :disabled="!agreementChecked"
      >
        刷脸验证
      </button>
      <div class="agreement-container">
        <input 
          type="checkbox" 
          v-model="agreementChecked" 
          id="agreement"
        >
        <label for="agreement" class="agreement-label">
          已阅读并同意《人脸信息处理规则》
        </label>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const agreementChecked = ref(false);
const faceimg = '../行为识别.png';
const router = useRouter();
const userName = ref(''); // 存储从本地获取的用户名
const maskedName = ref('王**'); // 初始化显示的掩码名

// 页面加载时获取本地存储的用户名
onMounted(() => {
  const storedName = localStorage.getItem('userName');
  if (storedName) {
    userName.value = storedName;
    // 生成掩码名（保留姓氏，其余用*替代）
    maskedName.value = generateMaskedName(storedName);
  }
});

// 生成掩码名函数
const generateMaskedName = (name: string): string => {
  if (!name || name.length <= 1) return name;
  const firstChar = name.charAt(0); // 获取姓氏
  const mask = '*'.repeat(name.length - 1); // 生成掩码
  return firstChar + mask; // 组合显示
};

// 返回上一页
const goBack = () => {
  router.push('/sfz');
};

// 处理刷脸认证
const handleFaceAuth = () => {
  if (agreementChecked.value) {
    router.push('/facethree');
  } else {
    alert('请先阅读并同意《人脸信息处理规则》');
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.home {
  padding: 20px;
}

.back-button-container {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1001;
}

.back-button {
  padding: 5px 10px;
  background-color: #54EA8C;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.auth-container {
  background-color: white;
  border-radius: 10px;
  text-align: center;
}

.auth-title {
  color: #333;
  margin-bottom: 10px;
}

.auth-desc {
  color: #333;
  margin-bottom: 5px;
}

.auth-tip {
  color: #666;
  margin-bottom: 20px;
}

.face-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
}

.face-img {
  width: 100%;
  height: 100%;
}

.auth-button {
  padding: 10px 20px;
  background-color: #54EA8C;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
}

.auth-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.agreement-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.agreement-checkbox {
  margin-right: 5px;
}

.agreement-label {
  color: #666;
  cursor: pointer;
}
</style>